#assets_downloader_main,#assets_downloader_header,.sb-mymodels  {
        
    justify-content: center;
    align-items: center;
    height: 44px;
    margin: 0;
}
#assets_downloader_main, .sb-mymodels {
height: auto;
padding-top: 0px;
padding-bottom: 150px;
}
#assets_downloader_header  {
    margin: 10px 0px;
    font-size: 16px;
    
}
/* General styles for the header */
#assets_downloader_header {
    display: flex;
    align-items: center;
    padding: 10px;

}

#assets_downloader_header .h-header {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    width: 100%;
    flex-direction: column;
}

.n-sb-searchmodels {
  box-sizing: border-box;
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  border: none;
  user-select: none;
  background: var(--comfy-input-bg);
  color: var(--input-text);
  line-height: 1.4;
  border: 1px solid var(--border-color);



    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    margin-right: 10px;
}

#assets_downloader_header select {
    padding: 10px;
    font-size: 16px;
    width : 145px;
    border-radius: 4px;

    border-color: var(--comfy-input-bg);
    background: var(--comfy-input-bg);
}



/* Main container styles */
#assets_downloader_main {
    padding: 4px;
}

/* Styles for the results container */
#results-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Ensure the container has defined height */
    min-height: 200px; /* Minimum height for the container, adjust if needed */
    position: relative;
}

/* Styles for the loading icon */
.pi-spinner-dotted {
    font-size: 2rem; /* Size of the loading icon */
}


.result-container,#library-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  
}
.result-card {
    background-color: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 287px;
    padding: 8px;
    height: 372px;
    text-align: center;
    position: relative;
    
}
.result-card img,
.result-card video {
    max-width: 100%;
    min-width: 100%;
    height: 60%;
    width: 100%;
    border-radius: 8px;
    /* height: auto; */
    object-fit: cover;
    object-position: center center;
    transition: transform 400ms;

}
.result-card h3 {
    margin: 10px 0;
    font-size: 18px;
}
.result-card p {
    color: #555;
    margin: 5px 0;
}
.result-card .username {
    font-weight: bold;
    color: #007bff;
}
.download-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
.download-button:hover {
    background-color: #0056b3;
}


/* multiselect from: https://codeshack.io/multi-select-dropdown-html-javascript/ */
.multi-select {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    width: 100%;
    user-select: none;

  }
  .multi-select .multi-select-header {
    border: 1px solid #dee2e6;
    padding: 7px 30px 7px 12px;
    overflow: hidden;
    gap: 7px;
    min-height: 43px;
  }
  .multi-select .multi-select-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23949ba3' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
    height: 12px;
    width: 12px;
  }
  .multi-select .multi-select-header.multi-select-header-active {
    border-color: var(--comfy-input-bg);
    background: var(--comfy-input-bg);
  }
  .multi-select .multi-select-header.multi-select-header-active::after {
    transform: translateY(-50%) rotate(180deg);
  }
  .multi-select .multi-select-header.multi-select-header-active + .multi-select-options {
    display: flex;
  }
  .multi-select .multi-select-header .multi-select-header-placeholder {
    color: var(--content-fg);
  }
  .multi-select .multi-select-header .multi-select-header-option {
    display: inline-flex;
    align-items: center;
    background-color: var(--comfy-menu-bg);
    font-size: 14px;
    padding: 3px 8px;
    border-radius: 4px;
    text-wrap: nowrap;
  }
  .multi-select .multi-select-header .multi-select-header-max {
    font-size: 14px;
    color: var(--content-fg);
  }
  .multi-select .multi-select-options {
    display: none;
    box-sizing: border-box;
    flex-flow: wrap;
    position: absolute;
    top: 100%;
    /* left: 0; */
    right: 0; 
    z-index: 999;
    margin-top: 5px;
    /* padding: 5px; */
    background-color: var(--bg-color);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* max-height: 200px; */
    overflow-y: auto;
    overflow-x: hidden;
    width: fit-content;
  }
  .multi-select .multi-select-options::-webkit-scrollbar {
    width: 5px;
  }
  .multi-select .multi-select-options::-webkit-scrollbar-track {
    background: #f0f1f3;
  }
  .multi-select .multi-select-options::-webkit-scrollbar-thumb {
    background: #cdcfd1;
  }
  .multi-select .multi-select-options::-webkit-scrollbar-thumb:hover {
    background: #b2b6b9;
  }
  .multi-select .multi-select-options .multi-select-option, .multi-select .multi-select-options .multi-select-all {
    padding: 4px 12px;
    height: 42px;
  }
  .multi-select .multi-select-options .multi-select-option .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all .multi-select-option-radio {
    margin-right: 14px;
    height: 16px;
    width: 16px;
    border: 1px solid #ced4da;
    border-radius: 4px;
  }
  .multi-select .multi-select-options .multi-select-option .multi-select-option-text, .multi-select .multi-select-options .multi-select-all .multi-select-option-text {
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    font-size: 16px;
    line-height: 20px;
  }
  .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio {
    border-color: var(--border-color);
    background-color: var(--bg-color);
  }
  .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio::after, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-radio::after {
    content: "";
    display: block;
    width: 3px;
    height: 7px;
    margin: 0.12em 0 0 0.27em;
    border: solid #fff;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
  }
  .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text, .multi-select .multi-select-options .multi-select-all.multi-select-selected .multi-select-option-text {
    color: var(--content-fg);
  }
  .multi-select .multi-select-options .multi-select-option:hover, .multi-select .multi-select-options .multi-select-option:active, .multi-select .multi-select-options .multi-select-all:hover, .multi-select .multi-select-options .multi-select-all:active {
    background-color: var(--content-bg);
    border-radius: 0;
  }
  .multi-select .multi-select-options .multi-select-all {
    border-bottom: 1px solid #f1f3f5;
    border-radius: 0;
  }
  .multi-select .multi-select-options .multi-select-search {
    padding: 7px 10px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    margin: 10px 10px 5px 10px;
    width: 100%;
    outline: none;
    font-size: 16px;
  }
  .multi-select .multi-select-options .multi-select-search::placeholder {
    color: #b2b5b9;
  }
  .multi-select .multi-select-header, .multi-select .multi-select-option, .multi-select .multi-select-all {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 16px;
    color: var(--content-fg);
    border-color: var(--comfy-input-bg);
    background: var(--comfy-input-bg);
    min-width: max-content;
  }


  #baseModelFilter{
    width: 157px !important;
  }
  #t1, #t2{
    display: none;
  }


  #assets_downloader_header {
    display: flex;
flex: 1;
position: relative;
width: calc(100% - 5px);
flex-direction: column;
justify-content: space-between;
align-items: center;
height: auto;
margin-top: 10px;
}

#assets_downloader_header input:focus, #assets_downloader_header select:focus, .multi-select .multi-select-header:active {
outline: var(--border-color) solid 2px;
}
#assets_downloader_main a, .sb-mymodels a {
text-decoration: none;
color: #fff;
}
.search-row {
width: 100%; 
display: flex;
justify-content: center;
}

.n-sb-searchmodels {
padding: 10px;
font-size: 16px;
border-radius: 4px;
width: 100%; /* Usa tutta la larghezza disponibile nella riga */
max-width: 100%; /* Nessun limite alla larghezza massima */
}

.type-checkpoint {
position: absolute;
top: 0;
right: 0px;
padding: 5px;
background: var(--content-fg);
border-radius: 5px;
margin: 10px 10px 0px 0px !important;
opacity: 0.7;
text-transform: uppercase;
font-weight: bold;
font-size: smaller;
}
#assets_downloader_main .stats, .sb-mymodels .stats {
position: absolute;
bottom: 0;
background: #404040;
padding: 5px;
border-radius: 5px;
color: var(--content-fg);
right: 3px;
}

#assets_downloader_main .username, .sb-mymodels .username {
position: absolute;
bottom: 0px;
right: 0;
margin: 5px;
background: var(--comfy-menu-bg);
padding: 6px;
border-radius: 5px;
}
/* Filtri */
.filters-row {
width: 100%;
max-width: 600px; 
display: flex;
flex-wrap: wrap; 
justify-content: center; 
gap: 3px;
margin-right: 15px;
}

#t1 .filters-row > * {
flex: 1 1 22%; 
/* min-width: 120px; */
}
/* Stili per le selezioni */
#assets_downloader_header select {
padding: 10px;
font-size: 16px;
border-radius: 4px;
width: 100%; 
max-width: 150px;
height: 42px;
margin-top: 10px;
}

/* Multi-select */
#assets_downloader_header .multi-select {
width: 145px; /* Larghezza massima per il multi-select */
margin-top: 10px;
}

/* Adattamento responsive */
@media (max-width: 768px) {
.filters-row {
    flex-direction: column; /* I filtri si dispongono in colonna su schermi più piccoli */
    align-items: center; /* Centratura orizzontale dei filtri su schermi più piccoli */
}

select, .multi-select,.n-sb-searchmodels {
    width: 100%; /* Usa tutta la larghezza disponibile */
    max-width: 100%; /* Nessun limite alla larghezza massima */
}
}


.sb-kebab-menu {
position: relative;
display: inline-block;
color: var(--content-fg);
margin-right: 10px;
display: flex;
align-items: center;
}

.sb-kebab-icon {
font-size: 24px;
cursor: pointer;
}

.sb-menu {
display: none;
position: absolute;
right: 0;
background-color:var(--bg-color);
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
list-style-type: none;
padding: 10px 0;
margin: 0;
border-radius: 4px;
z-index: 1;
width: max-content !important;
}

.sb-menu li {
padding: 8px 16px;
cursor: pointer;
}

.sb-menu li:hover {
background-color: var(--comfy-menu-bg);
}


.sb-rebuild-bg-pgs {
text-align: left;
        width: inherit;
        padding-right: 28px;
        display: none;
}
.sb-rebuild-bg-pgs label {
font-size: 0.6rem;
line-height: 1.6;
position: absolute;
padding-left: 5px;
}
.sb-rebuild-pgs {
width: 0%;
background: #1da874a6;
border-radius: 1px;
height: 16px;
font-size: 0.7vh;
text-align: center;
animation: pulsate 1.5s ease-in-out infinite; 
}

@keyframes pulsate {
0% {
    background-color: #1da874a6; /* Colore iniziale */
}
50% {
    background-color: #28a745; /* Colore più brillante o diverso */
}
100% {
    background-color: #1da874a6; /* Torna al colore iniziale */
}
}

#assets_downloader_main .card,  .sb-mymodels .card {
        position: relative;
        width: 220px;
        height: 340px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-size: cover;
        background-position: center;
        /*box-shadow: 0 0 7px 0px rgb(170 133 32 / 70%); */
        cursor: pointer;
    }

    #assets_downloader_main  .card img , .sb-mymodels .card img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    #assets_downloader_main .header,#assets_downloader_main  .footer ,  .sb-mymodels .header, .sb-mymodels .footer {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 2;
        text-align: left;
        color: white;
        padding: 10px;
    }

    #assets_downloader_main  .header, .sb-mymodels .header {
        top: 0;
        text-align: left;
        width: -moz-available; 
        width: -webkit-fill-available; 
   
    }

    #assets_downloader_main  .footer, .sb-mymodels .footer {
        bottom: 0;
       
    }

    #assets_downloader_main .content, .sb-mymodels .content {
        /*position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        text-align: center;*/
        color: white;
    }
    #assets_downloader_main .card .header .main-stripe, .sb-mymodels .card .header .main-stripe {
        box-sizing: border-box;
        -webkit-box-flex: 0;

    }

    #assets_downloader_main .card .header .sub-stripe, .sb-mymodels .card .header .sub-stripe, #assets_downloader_main .card .footer .sub-stripe, .sb-mymodels .card .footer .sub-stripe {
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: auto;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.25px;
        cursor: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.51);
        border: 1px solid transparent;
        color: rgb(254, 254, 254);
        border-radius: 32px;
        height: 26px;
        font-size: 9px;
        line-height: 18px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        text-decoration: none;
        padding: 0px 10.6667px;
        box-sizing: border-box;
    }
    #assets_downloader_main .card .header .main-stripe .separator, .sb-mymodels  .card .header .sub-stripe .separator {
        margin: -4px 8px;
        border-left-color: rgba(255, 255, 255, 0.31);
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        border-left-width: 1px;
        border-left-style: solid;
    }
    #assets_downloader_main .card .card-main-text, .sb-mymodels .card .card-main-text {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: inherit;
        font-size: 1.5vh;
        text-decoration: none;
        font-weight: 700;
        filter: drop-shadow(rgba(0, 0, 0, 0.8) 1px 1px 1px);
        line-height: 1.2;
        margin-bottom: 5px;
    }

    #assets_downloader_main .stats-section, .sb-mymodels .stats-section{
        -webkit-tap-highlight-color: transparent;
   
        font-size: 11px;
        line-height: 18px;
        text-decoration: none;
        padding: 0px 10.6667px;
        box-sizing: border-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
        width: auto;
        font-weight: 700;
        letter-spacing: 0.25px;
        cursor: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
        background: rgb(0 0 0 / 45%);
        border: 1px solid transparent;
        align-self: flex-start;
        color: rgb(254, 254, 254);
        border-radius: 32px;
        height: 26px;
    }
    #assets_downloader_main .card .creator-name, .sb-mymodels .card .creator-name{
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-webkit-tap-highlight-color: transparent;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #ffffff;
font-size: 0.70vw;
line-height: 1.55;
/* text-decoration: none; */
font-weight: 500;
/* background-clip: text; */
/* -webkit-text-fill-color: transparent; */
vertical-align: middle;
filter: drop-shadow(rgba(0, 0, 0, 0.8) 3px 1px 0px);
text-align: left;
padding: 0;
margin: 0px;

    }
    .card .model-image {
    transition: transform 0.3s ease-in-out;
    }
   /* .card img:hover, .image-overlay:hover{
        transform: scale(1.05);
    }*/
    .card .stat-item i {
        padding: 0 5px;
    }

           /* Overlay con effetto vetro */
           .card   .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgb(14 14 14 / 0%) 0%, rgb(47 47 58 / 79%) 100%);
      
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 24px;
        text-align: center;
        z-index: 99;
    }


    .card    .progress-container {
        width: 100%;
        height: 100%;
        background-color: #e0e0e0;
        position: relative;
   
    }

    .card .progress-bar {
        z-index: 98;
        height: 100%;
        background-color: #76c7c04f;
        width: 0%;
        transition: width 0.3s;
        position: absolute;
    }

  

    .card .sub-stripe-status{
        font-size: 1rem;
background: #00000073;
padding: 3px 10px;
border-radius: 11px;
display: none;
    }


    .sub-stripe-manager {
display: flex;
flex-direction: column; /* I div figli saranno disposti verticalmente */
align-items: flex-start; /* Allineamento a sinistra */
}
.sub-stripe-manager div {

padding: 2px 9px;
transition: filter 0.3s ease;
}
.sub-stripe-manager div:hover {
filter: brightness(180%); /* Aumenta la luminosità del 10% */
}
.sub-stripe-manager{
position: absolute;
right: 28px;
top: 0;
right: 0;
}

    .card .sub-stripe-dw{
        background: #ff4141;
        border-bottom-left-radius: 6px;
    }

    .card .sub-stripe-ps{
        background: #ff6720;
        display: none;
        filter: brightness(80%);
      
    }

    .card .sub-stripe-cn{
        background: #ff4141;
        border-bottom-left-radius: 6px;
        display: none;
        filter: brightness(80%);
    }
    .card .sub-stripe-complete{
        background:  #00c027;
      
        display: none;

    }
    .card .sub-stripe-delete{
        background: #ff4141;
        border-bottom-left-radius: 6px;
        display: none;
     
    }

.sb-pi-toast-center {
padding-top: 5px;
}